<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 分类数据
        const arr = [
            { id: 1, name: '头条' },
            { id: 2, name: '科技' },
            { id: 3, name: '体育' }
        ]

        // 项目存在的问题，只有一个 postList,切换栏目的时候，postList 以前的数据就没有了
        // const postList=[]
        // 解决方案：
        // map 数组映射，基于某个数组映射出新的数组
        const arr1 = arr.map(item => {
            // ...展开保留 item 原来的数据，在额外添加一个 postList,用于存放栏目对应的新闻数据
            return { ...item, postList: [] }
        })
        // 原来的数组，不会受到影响
        console.log(arr);
        // map 处理后的新数组
        console.log(arr1);
        // 直接在arr1[0].postList里面添加数据
        arr1[0].postList.push('我是新来的')


        // 如果有需要，map 也可以用来简化数据
        const arr2 = arr.map(item => { return item.name })
        console.log(arr2);

    </script>
</body>

</html>